<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            border: 10px solid #000;
        }
    </style>
</head>
<body>

<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>

<script>
    
    var box = document.getElementsByTagName("div")[0];


//    1.样式少的时候使用
    console.log(box.style.backgroundColor);

//    2.style是对象
    console.log(box.style);
    console.log(typeof box.style);

    //3.值是字符串，没有设置值是“”；
    console.log(box.style.lineHeight);
    console.log(box.style.border);
//    4.命名规则，驼峰命名。和css不一样
    console.log(box.style.backgroundColor);
//    5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
    console.log(typeof box.className);

    //    6.box.style.cssText = “字符串形式的样式”；
    console.log(box.style.cssText);
    box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"


</script>
</body>
</html>